<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>洪门年终总结</title>
		<style type="text/css">
			p:first-line {
				text-indent: 2em;
			}

			#audio {
				height: 10px;
				width: 10px;
				position: fixed;
				top: -100vh;
			}
		</style>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
	</head>
	<body>
		<div id="app">
			<h1 style="padding: 15px;text-align: center;">
				洪门年终总结
			</h1>
			<div style="padding:15px;line-height: 1.5rm;">
				<p v-for="(item,index) of contentList" :key="index" style="margin-bottom: 10px;">

					<span>
						{{item}}
					</span>
				</p>
			</div>
			
			<van-popup v-model="show" round :close-on-click-overlay="false">
				<template>
					<div style="width:240px;height:180px;">
						<div>
							<h3 style="padding:5px;text-align: center;">
								确定观看洪门年终总结
							</h3>
							<div style="padding: 5px;margin:10px;display: flex;justify-content:center;align-items: center;">
								<van-button type="primary" round @click="sumbit">确定</van-button>	
							</div>
							<div style="padding:5px;text-align: center;">
								<span style="font-size: 12px;color:red;">
									三代の温馨提示：内容存在背景音乐，若在公共场合请调至静音!
								</span>
							</div>  
						</div>
					</div>
				</template>
			</van-popup>
			<van-overlay :show="showMast" >
				
			</van-overlay>
			
			<div style="position: fixed;top:0;left:0;right:0;bottom:0;margin:auto;z-index: 99999;display: flex;flex-direction: column;justify-content: center;align-items: center;" v-if="showMast">
				<div>   
					<van-loading type="spinner" color="#fff8ff" />
				</div>
				<div style="color:#ffffff;margin-top:10px;font-size:12px;">
					正在加载中
				</div>
			</div>
			
			
			<audio id="audio" src="./newGjg.mp3" controls  ref="audio">
			</audio>
		</div>
	</body>
	<script src="./vue"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data() {
				return {
					showMast:false,
					show:false,
					message: 'Hello Vue!',
					contentList: [
						'诸位洪门的兄弟姐妹，亲朋好友们，大家好。我是本次洪门年终的发言人-洪门三代目话事人。',
						'首先，这一年里，大家都经历了风风雨雨，起起落落。疫情的突然到来，股市跌宕，美国大选等等一些列大事件，对我们的生活和工作都造成了不同程度的影响，但是在座的各位依旧坚挺，依旧矗立在洪门的世界里。你们要向自己的坚强表示感谢，对自己的坚韧不拔表示敬意。当然，我对在座的各位同样表达最崇高的尊敬！！',
						'其实我有些许惆怅，如换做往常，她们一定还在，她们一定会夸赞与我。',
						'天王的时代伴随着‘莫圣’的离开代彻底画上了句号。很遗憾，我不能再与她们同行；很遗憾，我再也无法轻声唤起她们的名字；我无比的怀念，怀念着‘悦悦’的温柔，‘飞飞’的纨绔，‘柠檬的’知性，‘莫莫’的动感，但这些也都不再重要了，但愿天王们离开以后过得更好。',
						'听闻现在‘悦悦’在体制内中流砥柱，‘柠檬’也开了自己的公司，‘莫莫’在家相夫教子安享天伦，只是‘飞飞’却不知在何处，只听人说在青岛的某片岛屿上，有一位奈子上有纹身的女子经常出没于此，抱腿坐在沙滩上，盯着海面默不出声，一发呆就是一宿。',
						'我真心想告诉天王们，如果想要回来了，我会在这里等着你们，一直等着你们。',
						'怀念始终是对过去的不甘，人的一生，需要偶尔往后看，但是往后看终将不能解决眼前的问题，所以我很高兴，‘赫赫’还在，她乘着旧时代的船舶，来到了新时代的海洋，而在新时代的海洋里，洪门永远有属于她的位置。',
						'洪门历代有人才辈出，在此感谢我们的四代话事人-局长，在这风雨动荡，摇曳不堪的一年里，夏炎一人扛大旗，使大力，身负洪门重任，带领洪门众人，克服千万困苦，迎来光明未来，同为洪门三长的我，为这样的队友而骄傲，作为洪门一份子的我，为有这样的话事人而自豪！',
						'当然，除了缅怀，我也有一些新的感触，无论是新旧洪门帮众，在任何时候大家都一心向前，大步挺胸，昂首阔步。当然我最特别夸奖一下高帅这个新人，他是特别的存在，他寄托了二代 三代的梦想。现在，他也是洪门的五代了，我希望你能够继承洪光辉的火之意志，将洪门继续发扬光大。',
						'时代的进步需要动力，后浪的翻滚需要前浪的波涛汹涌，洪门的前浪们，以BC 河马 老张 三宝等人为代表，还有千千万洪门的老帮众，你们正是推动洪门向前的中坚力量！新的一年，希望大家能够不忘初心，继续奋发！',
						'人的一生，大抵要经历酸甜苦辣，无论生活的重担有多重，无论感情事业家庭有多蹉跎，也请诸位不要放弃希望，因为有光，有希望，有信念，才有坚持的力量，才能拨开云雾见天日；诸位也请切记：‘己所不欲勿施于人’；人不可忘本，不可聒噪，更不可何不食肉糜。一个堂堂正正的人应该心怀善良，拥抱共情，为人与善，才能幸福长存。',
						'至此，我的年终发言到此结束，最后祝福大家新的一年，万事如意，身体健康，阖家欢乐！'
					]
				}
			},
			methods:{
				showPopup() {
				  this.show = true;
				},
				sumbit(){
					this.show = false;
					this.$refs.audio.play()
					this.showMast = true
					setTimeout(()=>{
						this.showMast = false
						vant.Notify({ type: 'danger', message: '音乐已开启' });
					},800)
					
					
				}
			},
			created() {
				this.show = true;
			}
		})
	</script>
</html>
